<template>
    <div style="width: 100%;height: 100%;">

         <div style="width: 100%;background-color: antiquewhite;">
            <ul>
                <li>
                    <input v-model="message"></input>
                </li>
                <li>
                    <el-radio-group v-model="is_robot">
                        <el-radio value="true" size="large">true</el-radio>
                        <el-radio value="false" size="large">false</el-radio>
                    </el-radio-group>
                </li>
                
                <button @click="addMessage">发送输入的请求</button>
            </ul>
        </div>
        <!-- <div style="width: 100%;background-color: antiquewhite;">
            <h3>获取静态图片资源</h3>
            <img v-if="is_show" :src="imageSrc" style="width: 200px;height: 160px;">
            <button @click="getImage">发送数据请求</button>
        </div>  -->
        <div style="width: 100%;background-color: antiquewhite;">
            
            <button @click="getRecReading">推荐阅读</button>
            <div v-html="marked(tar_str as string || '', { breaks: true })">

            </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">

import { ref } from "vue";
import {consult} from '../../sever/commondBackStage'
import {chatAIserver} from '../../sever/chatAI/chatAI_server'
import axios from "axios";
import { config } from "@/config";
import { marked } from 'marked';

let userName = ref("");
let userAge = ref();
let userSex = ref("");
let imageSrc = ref("");
let message = ref("");
let is_show = ref(false);
let is_robot = ref(false);

let answer = ref('');
let tar_answer = ref('')
let tar_str = ref('')

let last_index = ref(0);
let start_index = ref(0);


async function addMessage(){
    console.log("【发送的数据】",message.value,is_robot.value)
    let res = await chatAIserver.addMessage(message.value,is_robot.value);
    console.log("【发送结果】",res);
}



async function  getRecReading(){
    // let res = await chatAIserver.getRecReading();
    // console.log("【请求结果】",res);

    const response = await axios.post(
        config+'/api/streamConsult',
        { message: 'dance' },
        {
            responseType: 'stream', // 必须声明流式响应类型
            onDownloadProgress: async (progressEvent) => {
            // 实时处理数据块
            const chunk = progressEvent.event.target.response;
            answer.value = chunk;
            //记录该次返回字符串长度
            start_index.value = last_index.value;
            last_index.value = answer.value.length;
            tar_answer.value += answer.value.slice(start_index.value, last_index.value+1)
            await copyPate()
            console.log("【流式数据返回】",chunk)
            }
        }
    );
    
}

function copyPate() {
//   console.log(result.value.length, chat_message.value[chat_message.value.length-1].content.length);
  if (tar_str.value.length >= tar_answer.value.length) {

  // 退出递归
    return;
  } else {
  // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(()=>{
        //.charAt()用于获取字符串指定位置的字符
        tar_str.value += tar_answer.value.charAt(tar_str.value.length);
        copyPate();
    }, 10);
  }
}

</script>

<style scoped>


</style>